
import { useRef } from "react"
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore from 'swiper';  
import { Autoplay , Navigation, Pagination, } from 'swiper/modules';
import Image from 'next/image'; 
import 'swiper/css';
import 'swiper/css/pagination';

  
SwiperCore.use([Navigation]);




const SwiperView = ({isWeb}:any) => {
  const swiperRef = useRef(null); 
  const swiperArr = [
    { name: 'The Tok Chain is Used For Web3 Social Media and Storage Intensive\nApplications and Building The First Layer of Blockchain.' },
    { name: 'Empowers developers and brands to create frictionless Web3experiences\nwith a Generalized Abstraction layer that removestechnical barriers for all users.' },
    { name: 'Build, launch and scale consumer-ready products from the ground up — from\ninfrastructure to developmentconcept to deployment.' },
  ]

  // 自定义左按钮点击事件
  const handlePrevClick = () => {
    // console.log(swiperRef)
    if (swiperRef.current) {
      ((swiperRef.current)as any)?.swiper.slidePrev();
    }
  };

  // 自定义右按钮点击事件
  const handleNextClick = () => {
    if (swiperRef.current) {
      ((swiperRef.current)as any)?.swiper.slideNext();
    }
  };
  
  return <div>
        <div className="swiper_ab swiper_left" onClick={handlePrevClick}>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="20" width="20" >
            <path d="M22 37L4 20 22 3" fill="none" stroke="#e9eef2" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <Swiper
              ref={swiperRef}
              modules={[Autoplay,Navigation,Pagination]}
              className="swiper_box"
              // navigation
              pagination={{ clickable: true }}
              autoplay={{
                delay: 5000,
                disableOnInteraction: false
              }}
              speed={1500}
              loop
            >
              {
                swiperArr.map((items: any, idx: any) => <SwiperSlide key={idx}>
                  <div className="swiper_div">
                    <h2>{items.name}</h2>
                  </div>

                </SwiperSlide>)
              }
            </Swiper>
        <div className="swiper_ab swiper_right" onClick={handleNextClick}>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="20" width="20" >
            <path d="M22 37L4 20 22 3" fill="none" stroke="#e9eef2" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"  />
          </svg>
        </div>
      </div>
}

export default SwiperView;